﻿@{
    Layout = "~/Areas/User/Views/Shared/_Layout.cshtml";
}

@section Title{
    订单详情-美妆商城
}

@section Meta{
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta property="qc:admins" content="56207406376255516375" />

    @*<link rel="stylesheet" href="http://s0.jmstatic.com/templates/jumei/css/v45.3/jumei_usercenter.min.css?v7" type="text/css" media="screen" charset="utf-8" />*@
    <link href="~/Content/User/css/jumei/jumei_usercenter.min.css" rel="stylesheet" type="text/css" media="screen" charset="utf-8" />
    <script type="text/javascript">
        $(".orderInfo").click(function () {
            var id = $(this).attr("id").val();
            alert(id);
            $.ajax({
                url: '/User/Account/UserCenterInfo?id=' + id,
                type: 'POST',
                dataType: 'string',
                success: function (data) {
                    $("#order-list").html(data);
                }
            })
            $(".filter a").removeClass("curr");
            $(this).addClass("curr");
        })


    </script>

}


<div class="profile">
    <script src="http://s0.jmstatic.com/templates/jumei/js/jquery/jquery.selectui.min.js"></script>

    <div class="nav">
        <div class="notice">
            <a href="/i/account/avatar" target="_blank" style="border-bottom: 0;padding:0;">
                @*<img src="http://f0.jmstatic.com/static_account/dist/20160913/images/user_avatar/2/64_64.png" alt="JM136NBPE0583" />*@
                <img src=@ViewBag.userImage alt=@ViewBag.Name />
            </a>
            <p class="nickname"><a style="padding-left:0;line-height: 1.8;color:#ed145b" href="/i/account/settings" target="_blank">@ViewBag.Name</a></p>
            <p><a style="padding-left:0;line-height: normal;" href="/i/membership" target="_blank">普通会员</a></p>
            <p class="uid">用户ID:@ViewBag.UserId </p>
            <!--<p>可提现余额：{$balance}元</p>
            <p>不可提现余额：{$balance_no_withdraw}元</p>-->
        </div>
        <h2><b></b>我的聚美优品</h2>
        <a href="/i/order/list" class="list selected"><b></b>我的订单</a>
        <a href="/i/wishdeal/onsale" class="wish"><b></b>我的心愿单</a>
        <a href="/i/product/fav_products" class="fav"><b></b>我的收藏</a>
        <h2><b></b>管理个人账户</h2>
        <a href="/User/OrderOperate/ChangeUserInfo" class="settings"><b></b>设置账户信息</a>
        <a href="/i/account/password" class="password"><b></b>修改密码</a>
        <a href="/i/account/mobile_bind_status" class="bind"><b></b>绑定手机</a>
        <a href="/i/account/addresses" class="addr"><b></b>管理收货地址</a>




    </div>



    <div class="sp_icon_pos_wrapper">
    </div>

    @* test Start *@
    <h1><a class="btn_mid_pink order_return" href="/User/Account/UserCenter">返回订单列表</a>订单详情</h1>
    <div class="content sector">
        <h2 class="order_num"><strong>交易单号：851162202</strong></h2>
        <div class="safety_notice">
            <img src="http://f3.jmstatic.com/static_account/dist/20170406_1/images/i/auth_tip_icon.png">
            <p>重要提示：聚美不会以订单异常，升级系统为由，要求您点击任何链接进行退款、重新支付、额外付款操作。请认准聚美唯一官方电话400-123-8888。</p>
        </div>
        <div class="notice_content cl">
            <div class="order_sta_l">
                交易单状态：            <span class="status_green">
                    已过期
                </span>
            </div>
            <div class="order_sta_r"></div>
            <div class="order_sta_l">交易金额：<span class="pink">131.00元</span></div>
            <div class="order_sta_r">
                发货时间：未发货
            </div>
        </div>
        <div class="sub_container">
            <div class="sub_content">
                <div class="progress_bar">
                    <div class="progress_outter">
                        <div class="progress_inner" style="width:
                            ">
                        </div>
                    </div>
                    <div class="progress_desc">
                        <span class="step1">提交订单</span>
                        <span class="step2">付款成功</span>
                        <span class="step3">配货中</span>
                        <span class="step4">已发货</span>
                        <span class="step5">确认收货</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="clear"></div>
        <!-- 发票信息 -->
        <style>
            .invoice_line {
                padding-left: 7px;
                line-height: 24px;
            }

            .detail_modify_btn {
                font-weight: normal;
                font-size: 12px;
            }

            .invoice_label {
                padding: 0 10px 0 5px;
            }

            .invoice_company {
                margin-right: 12px;
                width: 360px;
            }

            .invoice_btn {
                padding: 6px 10px 7px;
                background: #fc7e89;
                color: #fff;
                text-decoration: none;
                margin-right: 10px;
            }

                .invoice_btn:hover {
                    text-decoration: none;
                }

                .invoice_btn.invoice_cancel {
                    background: #c5c5c5;
                }

            .invoice_icons {
                background: url(http://images.jumei.com/ui/usercenter_invoice/invoice_icons.png?v=2) no-repeat;
            }

            .invoice_error {
                display: none;
                padding-left: 17px;
                color: #ed145b;
                background-position: 0px -13px;
            }

            .invoice_line .help_icon {
                background-position: 0px 1px;
                padding: 0 8px;
                margin-left: 6px;
            }

            .invoice_tip {
                display: none;
                background: url(http://s0.jmstatic.com/templates/jumei/images/invoice_help_tip.png) no-repeat;
                padding: 9px 202px;
                margin-left: 5px;
            }
        </style>
        <script>
            $(function () {
                // 重置各表单内容
                function resetValues() {
                    var invoiceValue = $('.invoice_default_value').text();
                    if (invoiceValue == '个人') {
                        $('.invoice_modify').find('.invoice_type').eq(0).click();
                        $('.invoice_modify').find('.invoice_company').val('');
                    } else {
                        $('.invoice_modify').find('.invoice_type').eq(1).click();
                        $('.invoice_modify').find('.invoice_company').val(invoiceValue);
                    }
                }

                // 帮助问号的交互
                $('.invoice .help_icon').bind('mouseenter', function () {
                    $('.invoice .invoice_tip').show();
                }).bind('mouseleave', function () {
                    $('.invoice .invoice_tip').hide();
                });

                // 确保radio的赋值正确
                var radio = $('.invoice_type');
                var company = $('.invoice_modify').find('.invoice_company');
                var lastValue = '';
                radio.unbind('click').bind('click', function () {
                    radio.removeAttr('checked');
                    $(this).attr('checked', true);

                    if (this == radio[0]) {
                        company.attr('readonly', true);
                        lastValue = company.val();
                        company.val('');
                    } else {
                        company.removeAttr('readonly');
                        company.val(lastValue);
                    }
                });

                // 提交修改操作
                $('.invoice_submit').click(function () {
                    // check
                    var orderId = $('.invoice').attr('order-id') || "";

                    var data = {
                        commit: 1
                    };
                    if (radio.eq(1).attr('checked')) {
                        data.invoice_header = $('.invoice_company').val();
                        if (!data.invoice_header.length) {
                            $('.invoice').find('.invoice_error').show();
                            return false;
                        }
                    } else {
                        data.invoice_header = '个人';
                    }
                    $('.invoice').find('.invoice_error').hide();
                    $.ajax({
                        url: "/i/order/invoice?order_id=" + orderId,
                        dataType: "json",
                        type: "post",
                        data: data,
                        success: function (response) {
                            if (response && !response.error) {
                                $('.invoice .invoice_default_value').text(data.invoice_header);
                                $('.invoice_cancel').click();
                                resetValues();
                            } else {
                                alert(response.data);
                            }
                        },
                        error: function () {
                            alert('修改失败！');
                        }
                    });
                });

                // 修改时的取消按钮
                $('.invoice_cancel').click(function () {
                    $('.invoice_show').show();
                    $('.invoice_modify').hide();
                });

                // 顶部的开始修改按钮
                $('.detail_modify_btn').click(function () {
                    $('.invoice_show').hide();
                    $('.invoice_modify').show();

                    $('.invoice_error').hide();
                });

                // 初始时重置一遍表单
                resetValues();
            });
        </script>
        <!-- 发票信息结束 -->

        <div class="sub_container">
            <h2>配送信息</h2>
            <div class="sub_content">
                <table class="shipping_table">
                    <tr>
                        <td class="detail_head">收货地址</td>
                        <td class="order_info_td">
                            *豪, 136****0583, 河南省-郑州市-金水区 河南省郑州市郑东新区龙子湖校区河南中医学院
                        </td>
                    </tr>
                </table>
            </div>
        </div>


        <div class="sub_container">
            <h2>商品信息</h2>
            <table class="order_items">
                <tr>
                    <th>商品详情</th>
                    <th width="80">数量</th>
                    <th width="80">单价</th>
                    <th width="80">小计</th>
                </tr>
                <tr>
                    <td class="order_info_td">
                        <a href="http://www.jumei.com/i/deal/d170406p3306474zc.html" target="_blank" title="Za 二十周年限定隔离限量装">
                            Za 二十周年限定隔离限量装                                                         - 套装-套装
                        </a>
                        </br>
                        - 姬芮（Za） 新焕真皙美白 乳液 20ml  × 2</br>
                        - 姬芮(Za)净颜两用卸妆油 30ml 中样 × 1</br>
                        - 姬芮(Za) 恒润娇养 化妆水 醇润型 30ml × 1</br>
                        - 姬芮(Za) 恒润娇养 化妆水 30ml × 1</br>
                        - Za 姬芮 多元水活凝润洁面膏50g × 1</br>
                        - 姬芮 新能真皙美白隔离霜 35g × 2</br>
                        - 姬芮 裸透多效隔离霜（修饰偏黄肌肤）5g × 1</br>
                    </td>
                    <td>1</td>
                    <td>¥156.00</td>
                    <td class="td_price pink">¥156.00</td>
                </tr>
            </table>
        </div>
    </div>
    @* test End *@




    <style>
        .profile td a.sp_icon {
            display: inline-block;
        }

        .order_package span {
            padding-right: 0;
        }

        .profile .filter + table th {
            border: 1px solid rgb(219, 214, 208);
            border-top: 0;
        }
    </style>

    <style type="text/css">
        #dialog2 {
            display: block;
            height: 207px;
            width: 394px;
            position: relative;
            padding-top: 30px;
            overflow: hidden;
        }

        #cboxContent {
            border: none;
            background: url(http://p0.jmstatic.com/templates/jumei/images/account/corn_line.jpg) repeat-x bottom center;
            background-color: #767676;
        }

        #cboxLoadedContent {
            margin-top: 28px;
        }

        #cboxTitle {
            font-size: 14px;
            color: #FFF;
            top: 0px;
        }

        #cboxClose {
            top: 0;
            text-indent: 9999px;
            height: 28px;
            overflow: hidden;
        }

        .dia_pic {
            width: 120px;
            height: 120px;
            float: left;
            background: url(http://p0.jmstatic.com/templates/jumei/images/account/corn_00.jpg) no-repeat 20px;
        }

        .dia_con {
            width: 250px;
            margin-left: 20px;
            float: left;
            color: #333;
        }

            .dia_con p {
                font-size: 12px;
                line-height: 22px;
            }

                .dia_con p.dia_title {
                    font-size: 20px;
                    line-height: 36px;
                    font-weight: bold;
                }

        .return {
            width: 74px;
            height: 27px;
            text-align: center;
            line-height: 27px;
            background: url(http://p0.jmstatic.com/templates/jumei/images/home/btn_mid_pink.jpg) no-repeat top center;
            display: inline-block;
            color: #FFF;
            font-size: 14px;
            letter-spacing: 2px;
            margin: 20px 0 0 140px;
        }

            .return:hover {
                text-decoration: none;
            }
    </style>


    <style>
        #table-header-fixed {
            width: 769.5px;
            position: fixed;
            top: 0px;
            display: none;
            z-index: 2;
        }

            #table-header-fixed th {
                font-weight: normal;
                background: none;
                color: #afafaf;
            }
    </style>
    <script>
        $(function () {
            /* 去除最后一行分隔的border */
            $('.separator:last td').css({ 'border-bottom-color': 'white' });
            /* 固定表头 */
            //!($.browser.msie && $.browser.version < 8)
            if (true) {
                var $table = $("#order-list");

                if ($table[0]) {
                    var tableOffset = $table.offset().top + 100;
                    var $header = $("#order-list .order_list_title").clone();
                    var $fixedHeader = $("#table-header-fixed").append($header);

                    $(window).bind("scroll", function () {
                        var offset = $(this).scrollTop();

                        if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
                            $fixedHeader.show();
                        }
                        else if (offset < tableOffset) {
                            $fixedHeader.hide();
                        }
                        if (offset > tableOffset + $table.height()) {
                            $fixedHeader.hide();
                        }
                    });
                }
            }

            var threshold = 1000;
            var is_mouseout_popup = false;

            function hidePopup() {
                if (is_mouseout_popup) {
                    $('.sp_icon_pos_wrapper').hide().removeClass('real_name_wrapper');
                }
            }

            $('.sp_icon.sp_icon_trigger').hover(function () {
                var $this = $(this);
                var html = $this.find('.sp_icon_pos_inner').html();
                var offset = $this.offset();
                offset.left = offset.left - 30;
                offset.top = offset.top + 20;
                $('.sp_icon_pos_wrapper').html(html).css(offset).show().addClass('real_name_wrapper');
                is_mouseout_popup = false;
            }, function () {
                is_mouseout_popup = true;
                setTimeout(hidePopup, threshold);
            });

            $('.sp_icon_pos_wrapper').hover(function () {
                is_mouseout_popup = false;
            }, function () {
                is_mouseout_popup = true;
                setTimeout(hidePopup, threshold);
            });

        });
    </script>


    <style>
        .profile td.insert_td_empty {
            border-top: solid 1px white;
            border-bottom: solid 1px white;
        }

        .sp_icon_pos_inner {
            display: none;
        }

        .sp_icon_pos_wrapper {
            position: absolute;
            z-index: 2;
            border: 1px solid #DBD6D0;
            /* width: 300px; */
            max-width: 220px;
            _width: 220px;
            line-height: 18px;
            padding: 5px 12px;
            background: #FCFCFC;
            color: #676767;
            display: none;
        }
    </style>

    <style>
        .cancel_success_input_tip {
            display: inline-block;
            text-decoration: none;
            background: #ec195c;
            background: -webkit-gradient(linear, left top, left bottom, from(#f4769d), to(#ec195c));
            background: -webkit-linear-gradient(top, #f4769d, #ec195c);
            background: -moz-linear-gradient(top, #f4769d, #ec195c);
            background: -o-linear-gradient(top, #f4769d, #ec195c);
            background: linear-gradient(to bottom, #f4769d, #ec195c);
            -webkit-box-shadow: 0 1px 2px 0 #bbb;
            text-decoration: none;
            box-shadow: 0 1px 2px 0 #bbb;
            text-shadow: 1px 1px 3px #b9154a;
            vertical-align: middle;
            display: inline-block;
            font-family: inherit;
            word-break: keep-all;
            white-space: nowrap;
            font-weight: normal;
            text-align: center;
            line-height: 32px;
            font-size: 14px;
            cursor: pointer;
            height: 32px;
            width: 114px;
            color: #fff;
            border: 0;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#ffee1658, endColorStr=#ffee2467), progid:DXImageTransform.Microsoft.DropShadow(color=#ffb2b2b2, offX=0, offY=1, positives=true);
        }

            .cancel_success_input_tip:hover {
                text-decoration: none;
            }

        .cancel_success_layer_wrap {
            padding: 60px 20px 40px;
            text-align: center;
        }

        .cancel_success_input_wrap p {
            line-height: 50px;
        }

        .img_ok {
            background: url(http://s0.jmstatic.com/templates/jumei/images/ok.gif) no-repeat;
            padding-left: 36px;
            line-height: 36px;
            display: inline-block;
            font-size: 18px;
        }

        .order_info_td {
            /*width: 191px;*/
            width:682px;
        }

        table {
            table-layout: fixed;
            width: 769px;
        }
    </style>
    @*<script src="http://f3.jmstatic.com/static_account/dist/20170406_1/js/boot.js"></script>
        <link rel="stylesheet" href="http://f1.jmstatic.com/static_account/dist/20170406_1/css/sweet-alert.css">
        <script>
            window.STATIC_FOLDER = "http://f1.jmstatic.com/static_account/dist/20170406_1/";
            $(function () {
                seajs.use('order/list');
                seajs.use('pcviews/yiqituan');

                //回到顶部跟随 footer
                $(window).bind('scroll resize', function () {
                    var bottomPx = $(window).scrollTop() - $('#footer_container').position().top + $(window).height();

                    if (bottomPx > 90) {
                        bottomPx = bottomPx + 20 + 'px';
                        $('.backtotop').css('bottom', bottomPx);
                    } else {
                        $('.backtotop').css('bottom', '100px');
                    }
                });

            });
        </script>*@

</div>
<div class="clear"></div>

